<template>
  <div class="menu-manage">
    <!-- 业务搜索框 -->
    <!-- <search-block @handleSearch="handleSearch"></search-block> -->
    <!-- 搜索框和按钮组件 -->
    <operate-button
      :buttonDisplayRange="buttonDisplayRange"
      :multipleSelection="multipleSelection"
      :refSelectType="refSelectType"
      @handleRefSelect="handleRefSelect"
      @handleSearch="handleSearch"
    ></operate-button>
    <div class="pagination-table-container">
      <tree-table
        :currentPage="currentPage"
        :operateButton="operateButton"
        :pageSize="pageSize"
        :pageSizes="pageSizes"
        :tableData="tableData"
        :tableLabel="tableLabel"
        :total="total"
        @changePager="changePager"
        @changeSelection="changeSelection"
        @load="load"
        ref="treeTable"
      >
        <template v-slot:default="slotProps">
          <el-button
            @click="handleButton(slotProps.scope.$index, slotProps.scope.row)"
            plain
            round
            size="mini"
            type="primary"
          >分配按钮</el-button>
        </template>
      </tree-table>
    </div>
  </div>
</template>

<script>
import SearchBlock from './components/searchBlock'
import OperateButton from './components/operateButton'
import TreeTable from '@/components/PaginationTable/treeTable'

export default {
  name: 'MenuManage',
  components: {
    SearchBlock,
    OperateButton,
    TreeTable
  },
  props: {
    refButtonDisplayRange: String,
    refSelectType: String,
    operateButton: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      buttonDisplayRange: 'manage',
      multipleSelection: [],
      pageSizes: [5, 10, 100],
      // pageSize: 0,
      total: 0,
      tableLabel: [
        { keyword: 'title', keyword_zh: '名称' },
        { keyword: 'url', keyword_zh: '路由' },
        { keyword: 'icon', keyword_zh: '图标' },
        { keyword: 'sort', keyword_zh: '排序' },
        { keyword: 'id', keyword_zh: 'id' }
      ],
      tableData: [],
      currentPage: 1
    }
  },
  mounted() {
    if (this.refButtonDisplayRange) {
      this.buttonDisplayRange = this.refButtonDisplayRange
    }
    this.getTableData()
  },
  computed: {
    pageSize() {
      return this.pageSizes[0]
    },
    menu() {
      return {
        pager: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        },
        sortPointer: {
          field: 'sort',
          order: 'ASC'
        }
      }
    }
  },
  methods: {
    handleButton(index, row) {
    },
    load(params) {
      var tree = params.tree
      var treeNode = params.treeNode
      var resolve = params.resolve
      this.$store.dispatch('menu/getByPid', tree.id).then(res => {
        resolve(res)
      })
    },
    handleRefSelect(multipleSelection) {
      this.multipleSelection = multipleSelection
      this.$emit('refManageSelectData', this.multipleSelection)
    },
    changeSelection(val) {
      this.multipleSelection = val
      this.$emit('changeMenuManageSelection',val)
    },
    changePager(pager) {
      this.menu.pager = pager
      this.getTableData()
    },
    getTableData() {
      this.$store.dispatch('menu/queryForList', this.menu).then(res => {
        this.total = res.total
        //格式化部分数据类型
        // res.list.forEach(item => {
        //   if (item.pid) {
        //     item.pid = JSON.parse(item.pid).title
        //   }
        // })
        this.tableData = res.list
      })
    },
    handleSearch(searchParams) {
      if (!!searchParams) {
        this.menu.id = searchParams.id
        this.menu.title = searchParams.title
        this.menu.pid = searchParams.pid
      }
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.saearch-block-container {
  padding: 20px;
}
.operate-button-container {
  padding: 20px;
}
.pagination-table-container {
  padding: 0 20px 20px 20px;
}
</style>

